"use server";
import "./index.css";
import { Avatar, Button, Card, message } from "antd";
import { getQuestionBankVoByIdUsingGet } from "@/api/questionBankController";
import Meta from "antd/es/card/Meta";
import Paragraph from "antd/es/typography/Paragraph";
import Title from "antd/es/typography/Title";
import QuestionList from "@/app/components/QuestionList";
import QuestionBank = API.QuestionBank;
import BaseResponseQuestionBankVO_ = API.BaseResponseQuestionBankVO_;

/**
 * 题库详情页
 * @constructor
 */
// @ts-ignore
export default async function BankPage({ params }) {
  const { questionBankId } = params;
  let bank: BaseResponseQuestionBankVO_ | null = null;

  try {
    const res = await getQuestionBankVoByIdUsingGet({
      id: questionBankId,
      needQueryQuestionList: true,
      pageSize: 200,
    });
    console.log("当前的题库ID：" + questionBankId);
    bank = res.data;
  } catch (e) {
    // @ts-ignore
    message.error("获取题库列表失败" + e.message);
  }
  // 如果题目不存在
  if (!bank) {
    return <div>获取题库详情失败，请刷新重试</div>;
  }

  // 获取第一道题目：
  let firstQuestionId;
  // @ts-ignore
  if (bank.questionPage?.records && bank.questionPage.records.length > 0) {
    // @ts-ignore
    firstQuestionId = bank.questionPage.records[0].id;
  }

  return (
    <div id={"bankPage"} className={"max-width-content"}>
      <Card>
        <Meta
          // @ts-ignore
          avatar={<Avatar src={bank.picture} size={72} />}
          title={
            <Title level={3} style={{ marginBottom: 0 }}>
              {/*@ts-ignore*/}
              {bank.title}
            </Title>
          }
          description={
            <>
              {/*@ts-ignore*/}
              <Paragraph type={"secondary"}>{bank.description}</Paragraph>
              <Button type="primary" shape={"round"}
              href={`/bank/${questionBankId}/question/${firstQuestionId}`} target={"_blank"}
                      disabled={!firstQuestionId}
              >开始刷题</Button>
            </>

          }
        />
      </Card>
      <div style={{marginBottom: 20}}></div>
      {/*@ts-ignore*/}
      <QuestionList questionList={bank.questionPage?.records || []} cardTitle={`题目列表 - (${bank.questionPage?.total || 0})`} questionBankId={questionBankId} />
    </div>
  );
}
